<template>
  <div>
    <div class="flex flex-col items-center justify-center min-h-[50vh] px-4">
      <no-data type="404" :loading="loading" />
      <p class="mt-6 mb-8 text-center text-gray-600">
        {{ error.message || 'Sorry, there was an error in the page you visited .' }}
      </p>
    </div>
    <div class="max-w-7xl mx-auto lg:space-y-[1.875rem] max-lg:space-y-[1rem] lg:py-6 py-4 !z-[200] max-xl:px-4">
      <DirectCharge :cards="hotDirectChargeList" :show="false" v-if="hotDirectChargeList.length" />

      <RecommendCards :cards="recommendedlist" :show="false" v-if="recommendedlist.length" />
      <div class="h-10"></div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'ErrorPage',
    layout: 'newsHome',
    props: {
      error: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        loading: false, //  是否显示loading
        recommendedlist: [], // 推荐点卡
        hotDirectChargeList: [] // 新增：热门直冲列表
      }
    },
    computed: {
      errorMessage() {
        return this.error.msg
      }
    },
    head() {
      return {
        title: this.error.message || 'Page Not Found',
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: this.error.message || 'Sorry, there was an error in the page you visited'
          }
        ]
      }
    },
    mounted() {
      // api/goods/index?type=2&is_hot=1&page=1&limit=7
      this.name()
    },
    methods: {
      async name() {
        this.$axios.get('/api/goods/index?type=1&is_home=1&page=1&limit=7').then(result => {
          this.recommendedlist = result
        })
        //
        this.$axios.get('api/goods/index?type=2&is_hot=1&page=1&limit=10').then(result => {
          this.hotDirectChargeList = result
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .bg-primary {
    background-color: #1890ff;
    &-dark {
      background-color: #096dd9;
    }
  }
</style>
